<template>
    <base-panel>
        <el-container>
            <el-aside>
                <el-input type="text" v-model="name" clearable @input="getCategoryList" size="small"/>
                <div class="dept_tree">
                    <el-tree ref="treeBox" :data="categoryList" :props="defaultProps" @node-click="handleNodeClick" :loading="loading" :highlight-current="true" ></el-tree>
                </div>
            </el-aside>
            <el-main style="padding-top:8px">
                <good-table ref="goodTable" :params="{dept:this.dept_id}"></good-table>
            </el-main>
        </el-container>
    </base-panel>
</template>
<script>
    import XEUtils from "xe-utils";
    import category from "@/api/goodsManagement/category/index"
    import GoodTable from "./GoodsTable";
    export default {
        components: {GoodTable},
        data() {
            return {
                loading:false,
                name: "",
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                categoryList:[],
                templateList:[],
                dept_id:undefined,
                visible:false,
                currRow:{}
            };
        },
        created() {
            this.getCategoryList()
        },
        methods: {
            showDetailDialog(row){
                this.visible = true
                this.currRow = row
            },
            handleNodeClick(tab, event) {
                console.log('--handleNodeClick--',tab)
                if(!tab.children){
                    this.dept_id = tab.id
                    console.log('---', this.dept_id)
                    this.query({category:this.dept_id})
                }

            },
            getCategoryList() {
                this.loading = true;
                category.getList({name:this.name}).then(res => {
                    if (res.code == 0) {
                        let list =  res.data
                        this.categoryList = this.name?list:XEUtils.toArrayTree(list,{strict: true, parentKey: 'parent', key: 'id', children: 'children'});
                        if(this.categoryList.length>0){
                            this.dept_id = this.categoryList[0].id
                        }
                    }
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                });
            },
            query(queryData){
                this.$refs["goodTable"].query(queryData);
            }

        }
    };
</script>
<style lang="scss" scoped>
    .el-aside {
        border: 1px solid #D3DCE6;
        width: 30%!important;
        max-width: 400px;
    }

    .el-main {
        padding: 0 20px;
        border: 1px solid #D3DCE6;
        border-left: none;
        .icon-list {
            display: flex;
            flex-wrap: wrap;
        }
    }
    aside {
        margin-bottom: 0px;
        background: transparent;
        padding: 0;
        >.el-input{
            width: calc(100% - 40px);
            margin: 8px 20px 10px;
        }
        >.dept_tree{
            height: calc(100vh - 280px);
            overflow-y: scroll;
            padding: 0px 12px 0px 20px;
        }
    }
</style>
